@import './tailwind.css';

@primary-color: theme('colors.violet.500');
@info-color: theme('colors.sky.500');
@danger-color: theme('colors.red.500');
@success-color: theme('colors.emerald.500');
@warning-color: theme('colors.amber.500');

// 加上最外层的id，保证自定义css优先级
body {
  .bp4-card {
    @apply rounded-lg py-4;
  }

  .bp4-input {
    @apply block w-full py-2 pl-3 pr-3;
    @apply bg-white shadow-sm border border-slate-400 rounded-md border-solid;
    @apply focus:border-violet-500;

    &:focus {
      box-shadow: 0 0 5px @primary-color;
    }

    &[type='search' i]::-webkit-search-cancel-button {
      @apply mr-0 cursor-pointer;
    }
  }

  .bp4-input,
  // class of TagInput (also used by MultiSelect2)
  .bp4-input-ghost {
    @apply placeholder:italic placeholder:text-slate-400;
  }

  // simulate border using outline because Blueprint TextArea's auto-sizing doesn't work well with border
  textarea.bp4-input {
    @apply border-none outline outline-1 outline-slate-400;

    outline-offset: -1px;
  }

  .bp4-file-upload-input {
    @apply placeholder:italic placeholder:text-slate-400;
    @apply block w-full;
    @apply bg-white shadow-sm border border-slate-400 rounded-md border-solid;
    @apply focus:border-violet-500;
  }

  .bp4-large .bp4-file-upload-input::after {
    @apply m-1;
  }

  .bp4-callout {
    @apply rounded-md;
  }

  .bp4-input-group {
    .bp4-icon {
      @apply absolute inset-y-0 left-0 flex items-center m-0;

      span {
        @apply h-5 w-5;
      }
    }

    .bp4-button .bp4-icon {
      @apply relative;
    }

    .bp4-icon + .bp4-input {
      @apply pl-8;
    }
  }

  .bp4-large .bp4-file-upload-input {
    line-height: 2.375rem;
  }

  .bp4-large .bp4-file-upload-input::after {
    @apply text-slate-900 shadow-none rounded-none m-0;
    @apply border-l border-solid border-slate-400;
    @apply hover:shadow-none;

    height: 2.375rem;
    line-height: 2.375rem;
  }

  .bp4-button {
    @apply flex;
    @apply border border-solid border-transparent rounded-md font-semibold;
    @apply text-sm;
    @apply transition-colors;
    @apply justify-center items-center;

    &:not(.bp4-small) {
      @apply py-2 px-4;
    }

    &:not([class*='bp4-intent-']):not(.bp4-minimal) {
      @apply text-slate-900 shadow-none;
      @apply border-slate-400;
      @apply hover:shadow-none;
    }

    &.bp4-disabled {
      @apply opacity-50;
    }

    &.bp4-intent-primary {
      &,
      &.bp4-disabled {
        @apply bg-violet-500 enabled:hover:bg-violet-600;
      }
      &.bp4-minimal {
        @apply bg-transparent enabled:hover:bg-violet-100;
      }
    }

    &.bp4-intent-success {
      &,
      &.bp4-disabled {
        @apply bg-emerald-500 enabled:hover:bg-emerald-600;
      }
      &.bp4-minimal {
        @apply bg-transparent enabled:hover:bg-emerald-100;
      }
    }

    &.bp4-intent-warning {
      &,
      &.bp4-disabled {
        @apply bg-amber-500 enabled:hover:bg-amber-600;
      }
      &.bp4-minimal {
        @apply bg-transparent enabled:hover:bg-amber-100;
      }
    }

    &.bp4-intent-danger {
      &,
      &.bp4-disabled {
        @apply bg-red-500 enabled:hover:bg-red-600;
      }
      &.bp4-minimal {
        @apply bg-transparent enabled:hover:bg-red-100;
      }
    }

    .bp4-icon:first-child {
      @apply mr-2;
    }
  }

  // TODO: 请把select换成组件库的select
  // .bp4-html-select select {
  //   @apply block py-2 px-4;
  //   @apply border border-solid border-slate-400 rounded-md font-semibold;
  //   @apply text-sm shadow-none text-center;
  //   @apply transition-colors;
  //   @apply focus:outline-none;
  // }

  .bp4-popover2 {
    @apply rounded-lg;
    .bp4-popover2-content {
      @apply rounded-lg p-2;
    }
    ul li {
      .bp4-menu-item {
        @apply rounded-md;
      }

      &:not(:last-child) {
        @apply mb-1;
      }
    }
  }

  .bp4-dialog {
    @apply rounded-lg;
    & .bp4-dialog-header {
      @apply rounded-t-lg;
    }
  }

  .bp4-popover2 .bp4-heading {
    @apply opacity-80;
  }

  .bp4-toast {
    @apply rounded border-none;
    &.bp4-intent-success {
      @apply bg-emerald-500;
    }
    &.bp4-intent-warning {
      @apply bg-amber-500;
    }
    &.bp4-intent-danger {
      @apply bg-red-500;
    }
    .bp4-button {
      @apply border-none p-0;
    }
  }

  .bp4-numeric-input {
    & .bp4-input-group {
      @apply !mr-0;

      & input {
        @apply rounded-r-none border-r-0;
      }
    }

    & .bp4-button-group {
      & button {
        @apply !rounded-l-none;
      }
      & button:first-of-type {
        @apply !rounded-tr-lg;
      }
      & button:last-of-type {
        @apply !rounded-br-lg;
      }
    }
  }

  .bp4-skeleton {
    @apply rounded-md;
  }

  label.bp4-checkbox {
    @apply select-none;
  }
}
